<template>
	<div class="indexbox">
		<div class="bannerbox">
			<img class="backimg" src="../../assets/images/newimg/z12@2x.png" alt="" />
		</div>
		<nav>
			<div class="bullet_screen" v-for="(item,index) in bulletlist" :style="{top:item.top+ 'rem'}" :key="index">
				<img class="bulletimg l" src="../../assets/images/newimg/xz7@2x.png" alt="" />
				<p class="l backg">{{item.msg}}</p>
			</div>
		</nav>
		<div class="jtbox">
			<div class="l">》》》》》》</div>
			已有 {{homeStr.num}} 人参与活动
			<div class="r">》》》》》》</div>
		</div>
		<div class="count_down box_siz">
			<div class="showTimebox">{{homeStr.endTime | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div>
			<div class="dot">······································································</div>
			<p class="notxt">距离活动结束</p>
		</div>
		<div class="activity_rules">
			<p class="act_title">活动规则</p>
			<p class="act_main">{{homeStr.rule}}</p>
			<img class="btmimg" src="../../assets/images/newimg/dbx546@2x.png" alt="" />
		</div>
		<img class="centImg" src="../../assets/images/newimg/z123@2x.png" alt="" />
		<!--shangjia-->
		<div class="merchantbox box_siz">
			<div class="scrollBox">
				<div class="marlistbox l" v-for="(item,index) in business.business" :key="index">
					<router-link :to="'/shop/'+item.businessId+''">
						<img class="marimg" :src="item.businessPic" alt="" />
						<p class="martxt">{{item.businessName}}</p>
					</router-link>
				</div>
			</div>
		</div>
		<!--iphone_site-->
		<div class="iphone_sitebox box_siz" v-for="(item,index) in business.mainBusiness" :key="index">
			<img class="titleimg l" src="item.mainBusinessPic" alt="" />
			<div class="maxw l">
				<p class="iphNumber">电话：{{item.mainBusinessPhone}}</p>
				<p class="site">地址：{{item.mainBusinessAddress}}</p>
			</div>
		</div>
		<!--siwper-->
		<div class="siwperOuterbox">
			<!-- <div class="l lbox"></div>
			<div class="r rbox"></div> -->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(str,index) in business.mainBusiness" :key="index" >
						<router-link :to="'/shop/'+str.mainBusinessId+''" style="display: block;
    width: 100%;
    height: 100%;">
							<img :src="str.mainBusinessVipCardImg" alt="" style="width:100%;height:100%">
						</router-link>
					</div>
				</div>
				<div class="swiper-pagination swiper-pagination-white"></div>

			</div>
		</div>
		<!---->
		<div class="decoratebox">
			<span>····</span>
			<img src="../../assets/images/newimg/z124@2x.png" alt="" />
			<span>····</span>
		</div>
		<img class="centImg" src="../../assets/images/newimg/z123@2x.png" alt="" />
		<!---->
		<div class="footerbox box_siz">
			<div class="NumListbox" v-for="(item,index) in moneyAry" :key="index">
				<p class="numbertxt l">{{index+1}}</p>
				<img class="sortImg l" src="item.userHeadImg" alt="" />
				<div class="sortpeple l">
					<p>{{item.userName}}</p>
					<p>{{item.disNum}}</p>
				</div>
				<p class="moneyshow r">{{item.disMoney}}元</p>
			</div>
		</div>
		<!--tijiao-->
		<div class="btn" @click="Immediate">立即抢购</div>
		<!--position-->
		<ul class="positionbox">
			<li >
				<router-link :to="'/Invitation/'+this.activityId+'/'+this.userOpenId+''">
					<span style="color:#111">想赚钱</span>
				</router-link>
			</li>
			<li >
				<router-link to="/joinIn">
					<span style="color:#111">想加盟</span>
				</router-link>
			</li>
			<li><a href="tel:{{homeStr.phone}}"><img class="imgP" src="../../assets/images/newimg/dh.png" alt="" /></a></li>
			<li>
				<router-link to="/myOrder">
				<img class="imgN" src="../../assets/images/newimg/wd(1)@2x.png" alt="" />
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
import Swiper from 'swiper'
import '../../assets/swiper.min.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'H5index',
  // components: {
  //   swiper,
  //   swiperSlide
  // },
  data () {
    return {
      shareData: {},
      msg: '',
      bulletlist: [],
      listImg: [{
        url: require('../../assets/images/newimg/z11@2x.png')
      }],
      homeStr: {},
      business: [],
      moneyAry: [],
      // swiperOption: {
      //   notNextTick: true,
      //   pagination: '.swiper-pagination',
      //   slidesPerView: 'auto',
      //   centeredSlides: true,
      //   paginationClickable: true,
      //   spaceBetween: 30,
      //   onSlideChangeEnd: swiper => {
      //     // 这个位置放swiper的回调方法
      //     this.page = swiper.realIndex + 1
      //     this.index = swiper.realIndex
      //   }
      // },
      activityId: '',
      userOpenId: '',
      inviteUserOpenId: ''
    }
  },
  methods: {
    setdata () {
      let num = Math.random() * 10
      let top = Math.floor(num)
      let obj = [{
        msg: 'aaaaaaa',
        top: top
      },
      {
        msg: 'bbbbbb',
        top: top
      },
      {
        msg: 'ccccc',
        top: top
      }, {
        msg: 'ddddddd',
        top: top
      }
      ]
      this.bulletlist.push(obj)
      // this.bulletlist = JSON.parse(this.bulletlist)
      // console.log(this.bulletlist)
      this.msg = ' '
    },

    // 分享接口
    share () {
      var that = this
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/wx/queryWxConfig?activityId=' + that.activityId + '&wxOpenId=' + that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId
      }).then(function (res) {
        console.log(res)
        that.shareData = res
      })
    },
    businessInfo () {
      var that = this
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getBusiness?activityId=' + that.activityId,
        data: {}
      }).then(function (res) {
        if (res.status === 200) {
          that.business = res.data
        }
      })
    },
    // 有钱一起赚
    money () {
      var that = this
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getActivityDisMoneyList?activityId=' + that.activityId,
        data: {}
      }).then(function (res) {
        if (res.status === 200) {
          that.moneyAry = res.data
        }
      })
    },
    homeData () {
      var that = this
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getIndex?activityId=' + that.activityId,
        data: {}
      }).then(function (res) {
        console.log(res)
        if (res.status === 200) {
          localStorage.setItem('title', res.data.title)
          that.homeStr = res.data
        }
      })
    },
    // 跳转页面
    myOrder1 (businessId) {
      this.$router.push('shop/' + businessId)
    },
    Invitation () {
      this.$router.push('Invitation/' + this.activityId + '/' + this.userOpenId)
    },
    // 立即抢购
    Immediate () {
      var that = this
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/wx/pay?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId
      }).then(function (res) {

        console.log(res.data.data.appid);
        console.log(res.status);
        if (res.status === 200) {
          wx.chooseWXPay({
            timestamp: res.data.data.timeStamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: 'MD5',
            paySign: res.data.data.paySign,
            success: function (res) {
              // $window.location.reload()
            }
          })
        } else {
          alert(res.data.errorMessage)
        }
      })
    }
  },
  // computed: {
  //   swiper () {
  //     return this.$refs.mySwiper.swiper
  //   }
  // },

  mounted () {
    this.activityId = this.$route.params.activityId
    this.userOpenId = this.$route.params.userOpenId
    this.inviteUserOpenId = this.$route.params.inviteUserOpenId
    var that = this
    this.setdata()
    this.homeData()
    this.businessInfo()
    this.money()

    // this.swiper.slideTo(0, 0, false)
    // 分享接口调用
    // this.share()

    this.$http({
      method: 'get',
      url: 'http://api.wangjianxin.top/wx/queryWxConfig?activityId=' + that.activityId + '&wxOpenId=' + that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId
    }).then(function (res) {
      console.log("1111")
      console.log("11"+res.appid)
      console.log("222")

      that.shareData = res
    })

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: that.shareData.appip, // 必填，公众号的唯一标识
      timestamp: that.shareData.timestamp, // 必填，生成签名的时间戳
      nonceStr: that.shareData.noncestr, // 必填，生成签名的随机串
      signature: that.shareData.signature, // 必填，签名，见附录1
      jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    })

    // 分享好友
    wx.ready(function () {
      wx.onMenuShareAppMessage({
        title: '标题', // 分享标题
        desc: '描述', // 分享描述
        link: window.location.href, // 分享链接，该链接域名必须与当前企业的可信域名一致
        imgUrl: '', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        trigger: function (res) {
          // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
          // alert('click shared');
        },
        success: function (res) {

        },
        cancel: function (res) {
          // alert('shared cancle');
        },
        fail: function (res) {
          // alert(JSON.stringify(res));
        }
      })
    })

    var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      loop: true,
      speed: 600,
      autoplay: 4000,
      onTouchEnd: function () {
        swiper.startAutoplay()
      }
    })
  }
}
</script>

<style scoped>
.indexbox {
width: 7.5rem;
height: 100%;
}

.backimg {
width: 7.5rem;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -99;
}

	nav {
		width: 6.84rem;
		height: 10.18rem;
		margin: 0 auto;
		background: url(../../assets/images/newimg/z125@2x.png) no-repeat center;
		background-size: cover;
		overflow: hidden;
		position: relative;
	}

	.jtbox {
		width: 7.5rem;
		overflow: hidden;
		text-align: center;
		font-size: 0.33rem;
		font-family: FZLTZHUNHK--GBK1-0;
		font-weight: normal;
		color: rgba(210, 157, 43, 1);
		margin: 0.15rem auto 0.14rem;
	}
	/*count_down*/

	.count_down {
		width: 6.83rem;
		height: 1.98rem;
		margin: 0 auto;
		background: url(../../assets/images/newimg/z121@2x.png) no-repeat center;
		background-size: cover;
		margin-bottom: 0.18rem;
	}

	.showTimebox {
		font-size: 0.48rem;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		color: rgba(244, 192, 142, 1);
		text-align: center;
		padding-top: 0.45rem;
	}

	.showTimebox span {
		font-size: 0.24rem;
		margin: 0 0.11rem 0;
	}

	.dot {
		width: 5.49rem;
		overflow: hidden;
		height: 0.1rem;
		line-height: 0.1rem;
		margin: 0 auto;
		font-size: 0.4rem;
		color: rgba(244, 192, 142, 1);
		text-align: center;
	}

	.notxt {
		font-size: 0.24rem;
		font-family: SourceHanSansCN-Normal;
		font-weight: 400;
		color: rgba(244, 192, 142, 1);
		text-align: center;
	}
	/*huodongguize*/

	.activity_rules {
		width: 6.83rem;
		height: 3.45rem;
		background: url(../../assets/images/newimg/z122@2x.png) no-repeat center;
		background-size: 100% 100%;
		margin: 0 auto 0.24rem;
		padding-top: 0.4rem;
		text-align: center;
		font-size: 0.24rem;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: rgba(244, 192, 142, 1);
	}

	.act_title {
		font-size: 0.32rem;
		margin-bottom: 0.25rem;
	}

	.act_main {
		width: 5.27rem;
		max-height: 1.75rem;
		margin: 0 auto;
		line-height: 0.45rem;
		overflow: hidden;
	}

	.btmimg {
		width: 0.25rem;
		height: 0.13rem;
		margin-top: 0.35rem;
	}
	/*img*/

	.centImg {
		width: 3.52rem;
		height: 0.59rem;
		display: block;
		margin: 0 auto;
		margin-bottom: 0.27rem;
	}
	/*shangjia*/

	.merchantbox {
		width: 7.5rem;
		height: 3.4rem;
		padding-left: 0.39rem;
		margin-bottom: 0.26rem;
	}

	.scrollBox {
		width: 7.5rem;
		height: 3.4rem;
	}

	.marlistbox {
		margin-right: 0.29rem;
	}

	.marimg {
		width: 0.96rem;
		height: 0.96rem;
		display: block;
		margin-bottom: 0.16rem;
	}

	.martxt {
		font-size: 0.22rem;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: rgba(243, 184, 121, 1);
		text-align: center;
	}
	/*iphone_site*/

	.iphone_sitebox {
		width: 100%;
		height: 0.7rem;
		padding-left: 0.52rem;
		font-size: 0.24rem;
		font-family: SourceHanSansCN-Regular;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-bottom: 0.3rem;
	}

	.maxw {
		width: 78%;
	}

	.titleimg {
		width: 0.7rem;
		height: 0.7rem;
		margin-right: 0.3rem;
	}

	.site {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	/*siwper*/

	.siwperOuterbox {
		width: 100%;
		height: 3.78rem;
	}

	.scrollImgbox {
		width: 6.5rem;
		height: 3.78rem;
		margin: 0 auto;
	}

	.lbox {
		width: 0.24rem;
		height: 3.51rem;
		background: rgba(252, 236, 214, 1);
		opacity: 0.5;
		border-radius: 0 0.20rem 0.2rem 0;
		margin-top: 0.1rem;
	}

	.rbox {
		width: 0.24rem;
		height: 3.51rem;
		background: rgba(252, 236, 214, 1);
		opacity: 0.5;
		border-radius: 0.20rem 0 0 0.2rem;
		margin-top: 0.1rem;
	}

	.scrollImgbox img {
		width: 100%;
		height: 100%;
	}
	/*decoratebox*/

	.decoratebox {
		width: 50%;
		margin: 0 auto;
		font-size: 0.7rem;
		text-align: center;
		color: #fff;
	}

	.decoratebox img {
		width: 0.3rem;
		height: 0.3rem;
	}
	/*footer*/

	.footerbox {
		width: 6.83rem;
		height: 7.09rem;
		margin: 0 auto 0.45rem;
		background: url(../../assets/images/newimg/z125@2x.png) no-repeat center;
		background-size: 100% 100%;
		padding: 0.68rem 0.74rem 0 0.58rem;
	}

	.NumListbox {
		overflow: hidden;
		margin-bottom: 0.29rem;
	}

	.numbertxt {
		font-size: 0.60rem;
		font-family: HYJinChangTiJ;
		font-weight: bold;
		color: rgba(244, 192, 142, 1);
		margin-right: 0.25rem;
	}

	.sortImg {
		width: 0.88rem;
		height: 0.88rem;
		margin-right: 0.27rem;
	}

	.sortpeple {
		font-size: 0.28rem;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(216, 216, 216, 1);
	}

	.moneyshow {
		font-size: 0.40rem;
		font-family: AlternateGothicNo2BT-Regular;
		font-weight: 400;
		color: rgba(244, 192, 142, 1);
		line-height: 0.88rem;
	}
	/*btn*/

	.btn {
		width: 5.63rem;
		height: 0.88rem;
		background: rgba(244, 192, 142, 1);
		border: 1px solid rgba(244, 192, 142, 1);
		font-size: 0.36rem;
		font-family: SimSun;
		text-align: center;
		line-height: 0.88rem;
		font-weight: 400;
		color: rgba(0, 0, 6, 1);
		margin: 0 auto;
	}
	/*position*/

	.positionbox {
		width: 1rem;
		position: fixed;
		right: 0.33rem;
		bottom: 1rem;
	}

	.positionbox li {
		width: 1rem;
		height: 1rem;
		text-align: center;
		line-height: 1rem;
		background: rgba(244, 192, 142, 0.8);
		border-radius: 50%;
		font-size: 0.24rem;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(0, 0, 6, 1);
		margin-bottom: 0.14rem;
	}

	.imgP {
		width: 0.52rem;
		height: 0.51rem;
		vertical-align: middle;
	}

	.imgN {
		width: 0.49rem;
		height: 0.55rem;
		vertical-align: middle;
	}
	/*bullet_screen*/

	.bulletimg {
		width: 0.5rem;
		height: 0.5rem;
		margin-right: 0.2rem;
		margin: 0.03rem 0.1rem 0 0.08rem;
	}

	.backg {
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bullet_screen {
		position: absolute;
		/*top: 0.68rem;*/
		transform: translateX(50vw);
		animation: go 5s ease-in infinite;
		width: 2.93rem;
		height: 0.57rem;
		font-size: 0.16rem;
		color: #fff;
		background: orange/*#2c2b2b*/
		;
		border-radius: 1rem;
		line-height: 0.57rem;
	}

	@keyframes go {
		from {
			transform: translateX(-50vw);
		}
		to {
			transform: translateX(100vw);
		}
	}
	/**/

	.swiper-container {
		width: 6.5rem;
		height: 3.78rem;
		margin: 0 auto;
		}
		.swiper-wrapper {
			width: 6.5rem;
			height: 3.78rem;
		}
		.swiper-slide {
			background-position: center;
			background-size: cover;
			width: 100%;
			height: 100%;

		}
		img {
				width: 100%;
				height: 100%;
			}
		.swiper-pagination-bullet {
			width: 0.833rem;
			height: 0.833rem;
			display: inline-block;
			background: #7c5e53;
		}

</style>
